<template>
    <div>
        <div style="display: flex; margin-bottom: 10px" >
            <el-input v-model="loginName" placeholder="请输入姓名" suffix-icon="el-icon-search" style="width: 200px;margin-left: 10px " flex:1
                      @keyup.enter.native="loadPost"
            ></el-input>
            <el-select v-model="userIdentity" placeholder="请选择用户身份" style="width: 200px; margin-left: 10px">
                <el-option
                        v-for="item in userIdentities"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-button type="primary" style="margin-left: 10px" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="info" @click="add">新增</el-button>
        </div>
        <el-table :data="tableData"
                  :header-cell-style="{background:'darkgrey',color:'black'}">
            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>
            <el-table-column prop="loginName" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="gender" label="性别">
                <template v-slot="scope">
                    <el-tag
                            :type="scope.row.gender === 'M' ? 'primary' : 'success'"
                            disable-transitions>{{scope.row.gender === 'M' ? '男' : '女'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="userIdentity" label="身份">
                <template v-slot="scope">
                    <el-tag
                            :type="scope.row.userIdentity === '0' ? 'danger' : (scope.row.userIdentity === '1' ? 'warning' : (scope.row.userIdentity === '2' ? 'primary' : 'success'))"
                            disable-transitions>{{scope.row.userIdentity === '0' ? '超级管理员' : (scope.row.userIdentity === '1' ? '管理员' : (scope.row.userIdentity === '2' ? '教师' : '学生'))}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="birthday" label="生日">
            </el-table-column>
            <el-table-column prop="phone" label="电话">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template v-slot="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5,10, 20,30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                :before-close="handleClose"
                width="30%"
                center>

            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="姓名" prop="loginName">
                    <el-col :span="20">
                        <el-input v-model="form.loginName"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-col :span="20">
                        <el-input v-model="form.password"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="M">男</el-radio>
                        <el-radio label="F">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份" prop="userIdentity">
                    <el-radio-group v-model="form.userIdentity">
                        <el-radio label="1">管理员</el-radio>
                        <el-radio label="2">教师</el-radio>
                        <el-radio label="3">学生</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="生日" prop="birthday">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-col :span="20">
                        <el-input v-model="form.phone"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-col :span="20">
                        <el-input v-model="form.email"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="确认删除？"
                :visible.sync="confirmDelete"
                width="30%"
                center>
            <template>
                <el-button size="small"  @click="cancel" style="margin-left: 160px;">取消</el-button>
                <el-button size="small" type="danger" @click="confirm(tableData)">确认</el-button>
            </template>
        </el-dialog>
    </div>

</template>

<script>
export default {
    name: "UserPage",
    data() {
        /*
        验证账号唯一性，这个系统用不到
         */
        // let checkDuplicate =(rule,value,callback)=>{
        //     if(this.from.id){
        //         return callback();
        //     }
        //     this.$axios.get('http://localhost:8090/user/findUserById?id='+this.form.id)。then(res=>res.data).then(res=>{
        //         if (res.code==200){
        //             callback()
        //         }else {
        //             callback(new Error('账号已经存在'))
        //         }
        //     })
        // }
        return {
            id:0,
            tableData: [],
            pageSize:10,
            pageNum:1,
            total:0,
            loginName:'',
            userIdentity:'',

            userIdentities:[
                {
                    value: '0',
                    label: '超级管理员'
                }, {
                    value: '1',
                    label: '管理员'
                }, {
                    value: '2',
                    label: '教师'
                }, {
                    value: '3',
                    label: '学生'
                },
            ],
            centerDialogVisible:false,
            confirmDelete:false,

            form:{
                id:0,
                loginName:'',
                password:'',
                gender:'M',
                userIdentity:'',
                birthday:'',
                phone:'',
                email:'',
                status:'1',

            },
            rules: {
                loginName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                userIdentity: [
                    { required: true, message: '请选择身份', trigger: 'change' }
                ],
                birthday: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    { pattern:/^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '输入正确格式的手机号', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                ],
            },
        }
    },
    methods:{
        loadPost(){
            this.$axios.post('http://localhost:8090/user/listPage1',{
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param: {
                    loginName: this.loginName,
                    userIdentity: this.userIdentity
                }}).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.tableData=res.data
                    this.total=res.total

                }else {
                    alert('获取数据失败')
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize=val
            this.loadPost()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum=val
            this.loadPost()
        },
        resetParam(){
            this.loginName=''
            this.userIdentity=''
        },

        resetForm() {
            this.$refs.form.resetFields();
        },
        add(){
            this.centerDialogVisible=true
            this.$nextTick(()=>{
                this.resetForm();
            })
        },
        doSave(){
            this.$axios.post('http://localhost:8090/user/save',this.form).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.centerDialogVisible=false
                    this.loadPost()
                }else {
                    this.$message.error('添加失败');
                }
            })

        },
        save(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if(this.form.id){
                        this.doMod();
                    }else {
                        this.doSave();
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        doMod(){
            this.$axios.post('http://localhost:8090/user/update',this.form).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.centerDialogVisible=false
                    this.loadPost()
                }else {
                    this.$message.error('修改失败');
                }
            })

        },
        mod(row){
            this.centerDialogVisible=true
            this.$nextTick(()=>{
                console.log(row)
                this.form.id=row.id
                this.form.loginName=row.loginName
                this.form.password=''
                this.form.gender=row.gender
                this.form.userIdentity=row.userIdentity
                this.form.birthday=row.birthday
                this.form.phone=row.phone
                this.form.email=row.email
            })

        },
        del(id){
            this.confirmDelete=true
            this.id=id;
            console.log(id)
        },
        cancel(){
            this.confirmDelete=false
        },
        confirm(id){
            id=this.id
            console.log(id)
            this.$axios.get('http://localhost:8090/user/del?id='+id).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.confirmDelete=false
                    this.loadPost()
                }else {
                    this.$message.error('删除失败');
                }
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => {});
        },
    },
    beforeMount(){
        //this.loadGet()
        this.loadPost()
    }
}
</script>

<style scoped>

</style>